<template>
	<view class="order">
		<u-sticky bgColor="#fff">
			<u-tabs :list="tabs" :scrollable="false" :current='currentIndex' lineWidth="30" lineColor="#f56c6c"
				:activeStyle="{
			            color: '#ff0000',
			            fontWeight: 'bold',
			            transform: 'scale(1.05)',
			        }" :inactiveStyle="{
			            color: '#090000',
			            transform: 'scale(1)'
			        }" itemStyle="border-bottom: 1px solid #ddd; height: 40px; " @click="getOrder">
			</u-tabs>
		</u-sticky>
		<!-- <view v-if="getOrderList.length>0">
			{{getOrderList}}
		</view> -->
		<!-- {{timeupSecond}} -->
		<view class="orders">
			<view class="orders-ul" v-for="item in cartslist" :key="item.id">
				<view class="ul-header">
					<view class="span">
						{{item.deal}}
					</view>
				</view>
				<view class="orders-li" v-for="item2 in item.goodsList" @cheage='aa(item2.number)'>
					<view class="li-image">
						<image :src="item2.goodsUrl"></image>
					</view>
					<view class="li-detail">
						<view class="name">
							{{item2.title}}
						</view>
						<view class="line">
							{{item2.type}}
						</view>
						<view class="time">
							<text>{{item2.deliveryTime}}</text>
						</view>
					</view>
					<view class="prcie">
						<view class="p">{{item2.price}}</view>
						<view class="t">x{{item2.number}}</view>
					</view>
				</view>
				<view class="sumPrice">
					<view class="text1">共{{sum(item.id)}}件商品&nbsp;合计:</view>
					<view class="text2">￥{{sumPrice(item.id)}}</view>
				</view>
				<view class="buttom">
					<view class="t2" @click="onItemClick(item.id)">
						<u-icon name="more-dot-fill"></u-icon>
					</view>
					<view class="countdown" v-if="item.deal == '待付款'">
						<uni-countdown :show-day="false" :second="item.timeupSecond"
							@timeup="timeup(item.id)"></uni-countdown>
					</view>
					<view @click="ck(item.id)">
						<u-button type="default" shape="circle" :plain="true">查看订单</u-button>
					</view>
					<!-- <view>
						<u-button type="default" shape="circle" :plain="true">买了换钱</u-button>
					</view> -->
					<view @click="fk(item.id)">
						<u-button type="default" color="#ead932" shape="circle" :plain="true">{{pj(item.id)}}</u-button>
					</view>
				</view>
			</view>
		</view>
		
		<u-popup mode="bottom" :round="10" @close="close3" @open="open3" :show="showzf" :closeable="true">
			<view class="zf">
				<!-- <view>
					<view class="ren">
						<label>收获人</label>
						<input type="text"/>
					</view>
					<view class="ren">
						<label>收获地址</label>
						<input type="text"/>
					</view>
					<view class="ren">
						<label>联系电话</label>
						<input type="text"/>
					</view>
				</view> -->
				<view>
					<label>支付方式</label>
					<radio-group>
						<label class="fs">
							<view>
								<radio value="wx" checked="true" @click="ma('wx')"></radio>
							</view>
							<view>微信</view>
						</label>
						<label class="fs">
							<view>
								<radio value="zfb" @click="ma('zfb')"></radio>
							</view>
							<view>支付宝</view>
						</label>
					</radio-group>
				</view>
				<!-- <uqrcode ref="uqrcode" canvas-id="qrcode" value="https://uqrcode.cn/doc"
					:options="{margin:10,foregroundColor:color}"></uqrcode> -->
				<view class="qrzf" @click="zf()">
					确认支付
				</view>
			</view>
		</u-popup>
		
		<u-popup mode="bottom" :round="10" @close="close" @open="open" :show="show" :closeable="true">
			<view style="height: 50px;"></view>
			<scroll-view scroll-y scroll-with-animation >
				<view class="detail">
					<view v-for="item in order.goodsList" :key="item.title" class="item">
						<view>
							<image :src="item.goodsUrl" mode="widthFix"></image>
						</view>
						<view class="title">
							<label>{{item.title}}</label>
						</view>
						<view class="type">
							<label>{{item.type}}</label>
						</view>
						<view class="number">
							<label>{{item.number}}件</label>
						</view>
						<view class="price">
							<label>{{item.price}}￥</label>
						</view>
					</view>
				</view>
			</scroll-view>
		</u-popup>

	</view>
</template>

<script>
	import {
		apiOrders
	} from '../../api/mock.js'
	import { mapActions , mapGetters } from 'vuex'
	export default {
		data() {
			return {
				carts: [],
				tabs: [{
						name: '待付款',
						goods: null,
						num: 1,
						y: 0,
						curPageLen: 0,
						hasNext: true
					},
					{
						name: '待发货',
						goods: null,
						num: 1,
						y: 0,
						curPageLen: 0,
						hasNext: true
					},
					{
						name: '待收货',
						goods: null,
						num: 1,
						y: 0,
						curPageLen: 0,
						hasNext: true
					},
					{
						name: '待评价',
						goods: null,
						num: 1,
						y: 0,
						curPageLen: 0,
						hasNext: true
					}
				],
				currentIndex: 0,
				index2: "待付款",
				showzf: false,
				color: 'green',
				index: 0,
				show:false,
				order : {}
			}
		},
		onLoad(options) {
			uni.showLoading({
				title: '加载中'
			})
			this.getOrder(options)
			this.getOrder2()
		},
		methods: {
			...mapActions(['addOrders']),
			ck(i){
				this.carts.forEach(item=>{
					if(item.id == i){
						console.log(item);
						this.order = item;
						this.show = true;
					}
				})
			},
			fk(i) {
				let max = this.carts[0].id;
				for(let i=0;i<this.carts.length;i++){
					if(this.carts[i].id>max){
						max = this.carts[i].id
					}
				}
				this.carts.forEach((item) => {
					if (item.id == i) {
						if (item.deal == '待付款') {
							this.showzf = true;
						}else if(item.deal == '待发货'){
							uni.showToast({
								title: '确认发货',
								duration: 2000
							});
							item.id = max+1;
							item.deal = '待收货'
						}else if(item.deal == '待收货'){
							uni.showToast({
								title: '确认收货',
								duration: 2000
							});
							item.id = max+1;
							item.deal = '待评价'
						}else if(item.deal == '交易失败'){
							this.onItemClick(i)
						}
					}
				})
				this.index = i;
			},
			ma(i) {
				if (i == 'wx') {
					this.color = 'green'
				}
				if (i == 'zfb') {
					this.color = 'blue'
				}
			},
			zf() {
				let max = this.carts[0].id;
				for(let i=0;i<this.carts.length;i++){
					if(this.carts[i].id>max){
						max = this.carts[i].id
					}
				}
				this.carts.forEach((item) => {
					if (item.id == this.index) {
						item.deal = '待发货'
						uni.showToast({
							title: '支付成功',
							duration: 2000
						});
						item.id = max+1;
						this.showzf = false;
					}
				})
			},
			open(){
				this.show = true
			},
			close(){
				this.show = false
			},
			open3() {
				this.showzf = true;
			},
			close3() {
				this.showzf = false;
			},
			add() {
				
				console.log('add');
				var cart = uni.getStorageSync('dd');
				console.log(cart);
				console.log(this.carts);
				if(cart != ''){
					this.addOrders(cart)
				}
				uni.removeStorageSync('dd');
				
				console.log(cart);
				console.log(this.carts);
			},
			timeup(id) {
				var that = this;
				that.carts.forEach(item=>{
					if(item.id == id){
						that.timer = setInterval(function() {
							var time = (new Date(item.buy_time).getTime() + 15 * 60 * 1000) - (new Date().getTime());
							if (time > 0) {
								var minutes = parseInt(time / 1000 / 60 % 60, 10);
								var seconds = parseInt(time / 1000 % 60, 10);
								item.timeupSecond = parseInt(time / 1000);
								if (minutes < 10) {
									minutes = '0' + minutes;
								}
								if (seconds < 10) {
									seconds = '0' + seconds;
								}
								var timer = minutes + ':' + seconds;
							}
						}, 1000);
						if (item.timeupSecond == 0) {
							uni.showToast({
								title: '时间到'
							})
							that.carts.forEach((item) => {
								if (item.id == id) {
									console.log(item);
									item.deal = '交易失败'
								}
						
							})
						}
					}
				})
				
			},
			onItemClick(id) {
				const index = this.carts.findIndex(g => g.id === id);
				if (index !== -1) {
					uni.showModal({
						content: '是否删除该商品',
						success: (res) => {
							if (res.confirm) {
								this.carts.splice(index, 1);
							}
						}
					})
				}
				console.log('删除了商品：', id);
			},
			getOrder(e) {
				console.log(e);
				this.currentIndex = Number(e.index);
				console.log(this.currentIndex)
				if (this.currentIndex === 0) {
					this.index2 = '待付款'
					console.log(this.index2);
				}
				if (this.currentIndex === 1) {
					this.index2 = '待发货'
					console.log(this.index2);
				}
				if (this.currentIndex === 2) {
					this.index2 = '待收货'
					console.log(this.index2);
				}
				if (this.currentIndex === 3) {
					this.index2 = '待评价'
					console.log(this.index2);
				}
			},
			getOrder2() {
				this.carts = this.getOrderList;
					uni.hideLoading()
				this.add();
				// console.log('get');
				// apiOrders().then((res) => {
				// 	this.carts = [...res];
				// 	uni.hideLoading()
				// 	console.log(this.carts);
				// 	this.add();
				// }).catch((err) => {
				// 	console.log(err);
				// })
			}
		},
		computed: {
			...mapGetters(['getOrderList']),
			cartslist(){
				var arr;
				console.log(this.carts);
				if(this.carts){
					arr =  this.carts.filter((item)=>{
						if(this.index2 == '待付款'){
							console.log(item);
							
							return item.deal ==  this.index2 || item.deal == '交易失败'
						}
						return item.deal == this.index2;
					})
					arr.sort((a,b)=>{
						return b.id - a.id
					})
				}
				return arr;
			},
			sumPrice: function() {
				return (id) => {
					let num = 0;
					this.carts.forEach((item) => {
						if (item.id == id) {
							item.goodsList.forEach((val) => {
								num += val.number * Number(val.price)
							})
						}
					})
					return num;
				}
			},
			sum: function() {
				return (id) => {
					let num = 0;
					this.carts.forEach((item) => {
						if (item.id == id) {
							item.goodsList.forEach((val) => {
								num += val.number
							})
						}
					})
					return num;
				}
			},
			pj: function() {
				return (id) => {
					let s = '';
					this.carts.forEach((item) => {
						if (item.id == id) {
							if (item.deal == '待付款') {
								s = '付款'
							}
							if (item.deal == '待发货') {
								s = '确认'
							}
							if (item.deal == '待收货') {
								s = '收到'
							}
							if (item.deal == '待评价') {
								s = '评价'
							}
							if(item.deal == '交易失败'){
								s = '删除'
							}
						}
					})
					return s;
				}
			}
		},
	}
</script>

<style lang="scss">
	.detail{
		height: 505px;
		text-align: center;
		
		image{
			width: 150px;
		}
		
		.item{
			background-image: linear-gradient(to bottom right,#f0ddff,#ffa0cb);
			margin-top: 10px;
			
			.title{
				font-size: 17px;
			}
			.type{
				font-size: 12px;
				color: gray;
			}
			.number{
				
			}
			.price{
				font-weight: bold;
				font-size: 20px;
				color: red;
			}
				
			
		}
	}
	.zf {
		height: 505px;
		
		.ren{
			display: flex;
			input{
				margin-left: 15px;
				border-bottom: 1px solid black;
			}
		}
		
		view {
			margin-top: 25px;
			margin-left: 20px;
		}

		.fs {
			display: flex;
			margin-top: 20px;
		}

		.qrzf {
			position: absolute;
			bottom: 0;
			height: 35px;
			width: 80%;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: red;
			color: white;
			border-radius: 40px;
			margin-bottom: 10px;
		}
	}

	.order {
		background-color: #f2f2f2;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;

		.orders {
			padding: 10px;

			.orders-ul {
				background-color: white;
				padding: 10px;
				border-radius: 10px;
				margin-top: 20px;

				.ul-header {
					height: 30px;
					line-height: 30px;
					font-weight: bold;

					._h1 {
						float: left;
						display: flex;
						height: 100%;
						width: 170px;
						justify-content: space-between;
					}

					.span {
						font-size: 15px;
						float: right;
						color: gold;
					}
				}

				.ul-header image {
					width: 15px;
					height: 15px;
				}

				.orders-li {
					display: flex;
					font-size: 12px;
					margin-top: 10px;

					.li-detail {
						padding: 5px;
						overflow: hidden;

						.name {
							overflow: hidden;
							text-overflow: ellipsis;
							line-height: 20px;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
						}

						.line {
							color: gray;
							margin-top: 5px;
						}

						.time {
							margin-top: 5px;
							color: #ead932;
						}
					}

					.prcie {
						text-align: right;
						width: 100px;
						height: 100%;

						.p {
							margin-top: 10px;
						}

						.t {
							color: gray;
						}

					}
				}

				.orders-li image {
					width: 90px;
					height: 90px;
					border-radius: 8px;
				}

				.sumPrice {
					height: 40px;
					line-height: 40px;
					display: flex;

					.text1 {
						font-size: 12px;
						margin-left: 53%;
					}
				}

				.buttom {
					display: flex;
					padding: 5px;
					justify-content: space-between;

					.t2 {
						height: 100%;
						margin-top: 10px;
					}
				}

				.buttom button {
					height: 30px;
					width: 80px;
					font-size: 13px;
					border: 1px solid gainsboro;
				}
			}
		}
	}

	.countdown {
		display: flex;
	}
</style>